<template>
  <div :id="idString" style="height:190px;">
  </div>
</template>

<script>
  import * as echarts from 'echarts'
  let PieColor = [
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: '#F3B407'
      },
      {
        offset: 1,
        color: '#F27011'
      }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: '#82BFFF'
      },
      {
        offset: 1,
        color: '#0D4DF2'
      }
    ]),
    new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: '#9C99FF'
      },
      {
        offset: 1,
        color: '#33317E'
      }
    ]),

    '#009DFF', '#00e473', '#395CFE', '#2EC7CF', '#733DFF', '#966EFF', '#7fdefe']

  let colorList = PieColor
  export default {
    props: {
      text: String,
      unit: {
        type: String,
        default: '台'
      },
      seriesData: {
        type: Array,
        default: () => {
          return [{
                    name: 'CPU',
                    value: 0
                  // itemStyle: {
                  //   emphasis: {
                  //     shadowBlur: 10,
                  //     shadowColor: 'rgba(242,112,17,.5)'
                  //   }
                  // }
                  }, {
                    name: 'GUP',
                    value: 0
                  // itemStyle: {
                  //   emphasis: {
                  //     shadowBlur: 10,
                  //     shadowColor: 'rgba(130,191,255,.5)'
                  //   }
                  // }
                  },
                  {
                    name: '其他',
                    value: 0
                  // itemStyle: {
                  //   emphasis: {
                  //     shadowBlur: 10,
                  //     shadowColor: 'rgba(156,153,255,.5)'
                  //   }
                  // }
                  }]
        }
      }
    },
    data () {
      return {
        idString: ''
      }
    },
    created () {
      this.idString = 'chart_' + Math.random().toString(32).substr(6)
    },
    computed: {
      chartOption () {
        return {
          // backgroundColor: '#000000',
          legend: {
            orient: 'horizontal',
            zlevel: 100,
            bottom: '0px',
            itemWidth: 15,
            itemHeight: 15
          },
          title: {
            text: '费用分类占比',
            subtext: '100%',
            textAlign: 'center',
            textStyle: {
              color: '#666666',
              fontSize: 14

            },
            subtextStyle: {
              fontSize: 20,
              color: ['#333333']
            },
            x: '49%',
            y: '40%'
          },
          series: [{
            itemStyle: {
              normal: {
                color: function (params) {
                  return colorList[params.dataIndex]
                },
                borderColor: '#ffffff',
                borderWidth: 2,
                borderRadius: 4
              }
            },
            type: 'pie',
            // clockWise: false ,
            // roseType: 'radius',
            // roseType: 'area',
            // selectedOffset: 10,
            // selectedMode: true,
            radius: ['50%', '70%'],
            center: ['50%', '48%'],
            avoidLabelOverlap: false,
            labelLine: {
              normal: {
                lineStyle: {
                  color: '#34569D'
                }
              }
            },
            label: {
              normal: {
                show: false
              // formatter: function (params, ticket, callback) {
              //   let total = Total
              //   let percent = 0
              //   percent = ((params.value / total) * 100).toFixed(1)
              //   return '{name|' + params.name + '\n}{value|' + params.value + '}{percent|' + params.percent.toFixed(0) + '%}'
              // },
              // padding: [0, -5, 0, -5]
              }
            },
            emphasis: {
              scaleSize: 4
            },
            data: this.seriesData
          }, {
            itemStyle: {
              normal: {
                color: '#ffffff',
                shadowBlur: 10,
                shadowColor: 'rgba(51,49,126,0.15)'
              }
            },
            type: 'pie',
            hoverAnimation: false,
            radius: ['45%', '75%'],
            center: ['50%', '48%'],
            label: {
              normal: {
                show: false
              }
            },
            data: [{
              value: 1
            }],
            z: -1
          }]
        }
      }
    },
    async mounted () {
      const myChart = echarts.init(document.getElementById(this.idString))
      myChart.setOption(this.chartOption)
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
</style>
